<div class="section d-flex flex-column">
    <div class="header">
        <img src="/img/vim.png" alt="vim" style="height: 20px"/>
        Vim
        <small class="text-warning"
               title="This feature is experimental. Feedback is welcome.">
            <i>(experimental)</i>
        </small>
    </div>
    <div class="body d-flex gap-5 justify-content-between align-items-center">
        <div class="form-check"
             title="Enable vim keybindings in the editor.">
            <input id="enableVim"
                   class="form-check-input"
                   type="checkbox"
                   checked.bind="settings.editor.vim.enabled">
            <label class="form-check-label" for="enableVim">
                Enable Vim keybindings (${vimModeKeyCombo}).
            </label>
        </div>
    </div>
</div>

<div class="section flex-grow-height-restricted d-flex flex-column">
    <div class="header">
        <i class="monaco-settings-icon text-orange"></i>
        Monaco Options
    </div>
    <div class="body d-flex gap-5 justify-content-between align-items-center">
        <p class="m-0">
            Configure the Monaco editor.
            <a href="https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorOptions.html"
               external-link>Options Reference</a>
        </p>
        <div style="width: 200px">
            <div class="d-flex gap-3 align-items-center">
                <b>Theme: </b>
                <select class="form-select form-select-sm p-3" value.bind="theme">
                    <option value="">Auto</option>
                    <option repeat.for="theme of getThemes()" value.bind="theme.id">${theme.name}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="body flex-grow-height-restricted">
        <div class="text-editor" id="options-editor"></div>
    </div>
</div>
